<template>
	<div>
		<section class="data_section" v-loading="infoLoading">
			<div class="data_profiling">
				<div class="data_title">数据概览</div>
				<div class="data_main">
					<el-row>
						<el-col :span="4">
							<div class="grid-content">
								<div class="data-set">
									<div class="data-col-title">监控数据集</div>
									<div class="data-value">
										<CountTo :startVal="0" :endVal="datasetNumber" :duration="1000"></CountTo>
									</div>
									<!-- <div class="data-yoy">较昨天</div> -->
								</div>
							</div>
						</el-col>
						<el-col :span="4">
							<div class="grid-content">
								<div class="data-table">
									<div class="data-col-title">监控数据表</div>
									<div class="data-value">
										<CountTo :startVal="0" :endVal="datasetTableNumber" :duration="1000"></CountTo>
									</div>
									<!-- <div class="data-yoy">较昨天</div> -->
								</div>
							</div>
						</el-col>
						<el-col :span="4">
							<div class="grid-content">
								<div class="mon-fields">
									<div class="data-col-title">监控字段</div>
									<div class="data-value">
										<CountTo :startVal="0" :endVal="datasetFieldNumber" :duration="1000"></CountTo>
									</div>
									<!-- <div class="data-yoy">较昨天</div> -->
								</div>
							</div>
						</el-col>
						<el-col :span="4">
							<div class="grid-content">
								<div class="rules-number">
									<div class="data-col-title">核验规则数</div>
									<div class="data-value">
										<CountTo :startVal="0" :endVal="ruleMappingNumber" :duration="1000"></CountTo>
									</div>
									<!-- <div class="data-yoy">较昨天</div> -->
								</div>
							</div>
						</el-col>
						<el-col :span="4">
							<div class="grid-content">
								<div class="verification-number">
									<div class="data-col-title">累计核验数量</div>
									<div class="data-value">
										<CountTo :startVal="0" :endVal="hysl" :duration="1000"></CountTo>
									</div>
									<!-- <div class="data-yoy">通过率</div> -->
								</div>
							</div>
						</el-col>
						<el-col :span="4">
							<div class="grid-content">
								<div class="refresh-time">
									<div class="data-col-title">距离下次质控报告刷新时间</div>
									<div class="data-value">
										<el-countdown v-if="loading" format="HH:mm:ss" :value="deadline" />
									</div>
								</div>
							</div>
						</el-col>
					</el-row>
				</div>
			</div>
			<div class="data_q">
				<el-row :gutter="10">
					<el-col :span="14">
						<div class="data_title">数据Q值</div>
						<div class="data_main">
							<el-row :gutter="8">
								<el-col :span="8">
									<div id="dataQ"></div>
								</el-col>
								<el-col :span="16">
									<div id="dataVerification"></div>
								</el-col>
							</el-row>
						</div>
					</el-col>
					<el-col :span="10">
						<div class="data_title" style="margin: 0 0 0 10px; display: flex; justify-content: space-between">
							机构数据Q值排名
							<!-- <span class="see-more">查看更多</span> -->
						</div>
						<div class="data_main" style="padding: 20px 0 0 10px">
							<el-table :data="tableData" border style="width: 100%">
								<el-table-column prop="rk" label="排名" width="90" align="center"> </el-table-column>
								<el-table-column label="机构名称" align="center">
									<template #default="scope">
										<span style="color: rgba(22, 93, 255, 1)">{{ scope.row.org_name }}</span>
									</template>
								</el-table-column>
								<el-table-column prop="qa" label="Q值" sortable align="center">
									<template #default="scope">
										<span>{{ numberFliter(scope.row.qa) }}</span>
									</template>
								</el-table-column>
								<el-table-column prop="upValue" label="上升值" align="center"> </el-table-column>
							</el-table>
						</div>
					</el-col>
				</el-row>
			</div>
			<div class="data_title">数据核验趋势</div>
			<div id="dataV-trend"></div>
		</section>
	</div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts'
import CountTo from '@/components/src/vue-countTo.vue'
import { ref, reactive, onMounted, onUnmounted, computed } from 'vue'

import { getDataView } from '@/api/data-overview/apiOverview'

let mainChart = echarts

let infoLoading = ref(true)
const loading = ref(false)
const datasetNumber = ref(0)
const datasetTableNumber = ref(0)
const datasetFieldNumber = ref(0)
const ruleMappingNumber = ref(0)
const hysl = ref(0)
let sjhyqsXData = ref([])
let sjhyqsYData1 = ref([])
let sjhyqsYData2 = ref([])

const tableData = ref([])
const deadline = ref()

let indicator = ref([])
let qValData = ref([])
let chartdata = ref([])

const chartColor = ref([
	'rgba(66, 123, 253, 1)',
	'rgba(212, 242, 127, 1)',
	'rgba(117, 207, 125, 1)',
	'rgba(252, 206, 79, 1)',
	'rgba(252, 134, 127, 1)',
	'rgba(176, 129, 236, 1)',
	'#79f3dd'
])

onMounted(() => {
	init()
})

onUnmounted(() => {
	mainChart.dispose
})

const numberFliter = number => {
	return parseFloat(number).toFixed(2)
}

const init = () => {
	getDatas()
}

const getDatas = () => {
	infoLoading.value = true

	indicator.value = []
	qValData.value = []
	chartdata.value = []
	sjhyqsXData.value = []
	sjhyqsYData1.value = []
	sjhyqsYData2.value = []

	getDataView()
		.then((res: any) => {
			loading.value = true
			infoLoading.value = false
			if (res.data && res.data[0]) {
				hysl.value = parseFloat(res.data[0].hysl)
				datasetNumber.value = parseInt(res.data[0].datasetNumber)
				datasetTableNumber.value = parseInt(res.data[0].datasetTableNumber)
				datasetFieldNumber.value = parseInt(res.data[0].datasetFieldNumber)
				ruleMappingNumber.value = parseInt(res.data[0].ruleMappingNumber)

				if (res.data[0].nextTime) {
					deadline.value = new Date(res.data[0].nextTime)
				}

				// 数量Q值
				const qValue = res.data[0].qValue
				if (qValue && qValue.length) {
					qValue.forEach(element => {
						indicator.value.push({
							text: element.RULE_TYPE_NAME,
							max: 100,
							color: '#000'
						})
						qValData.value.push(parseFloat(element.rto).toFixed(2))
					})
				}
				// 核验量
				const jyl = res.data[0].jyl
				if (jyl && jyl.length) {
					jyl.forEach(element => {
						chartdata.value.push({
							name: element.RULE_TYPE_NAME,
							value: parseFloat(element.total_cnt)
						})
					})
				}
				// 数据Q值排名
				const qpm = res.data[0].qpm
				tableData.value = qpm
				// 数据核验趋势
				const sjhyqs = res.data[0].sjhyqs
				if (sjhyqs.length) {
					sjhyqs.forEach(element => {
						sjhyqsXData.value.push(element.check_time)
						sjhyqsYData1.value.push(element.total_cnt)
						sjhyqsYData2.value.push(element.correct_cnt)
					})
				}
			}

			initDataQChart()
			initDataVerificationChart()
			initTrendChart()
		})
		.catch(() => {
			loading.value = false
		})
}

const initDataQChart = () => {
	const dom = document.getElementById('dataQ')
	let myChart = mainChart.init(dom)

	myChart.setOption({
		title: {},
		tooltip: {
			show: true,
			trigger: 'item',
			backgroundColor: 'rgba(0, 0, 0, 0.70)',
			textStyle: {
				color: '#fff'
			}
		},
		radar: {
			center: ['50%', '40%'],
			axisName: {
				textStyle: {
					color: '#1D2129',
					fontSize: 12
				}
			},
			splitLine: {
				lineStyle: {
					color: 'rgba(201, 205, 212, 1)', // 分隔线颜色
					width: 1 // 分隔线线宽
				}
			},
			splitArea: {
				// 坐标轴在 grid 区域中的分隔区域，默认不显示。
				show: true,
				areaStyle: {
					// 分隔区域的样式设置。
					color: ['rgba(255,255,255,0)', 'rgba(255,255,255,0)'] // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
				}
			},
			indicator: indicator.value,
			radius: 70
		},
		series: [
			{
				type: 'radar',
				symbolSize: 5,
				data: [
					{
						value: qValData.value,
						name: '数据Q值',
						symbolSize: 5,
						areaStyle: {
							color: 'rgba(22,93,255,0.3)' // 单项区域填充样式
						}
					}
				]
			}
		]
	})

	// window.addEventListener('resize', myChart.resize)
}

// 核验量饼图
const initDataVerificationChart = () => {
	const dom = document.getElementById('dataVerification')
	let myChart = mainChart.init(dom)

	// 颜色系列
	let color1 = []
	// 设置每层圆环颜色和添加间隔的透明色
	chartColor.value.forEach(item => {
		color1.push(item, 'transparent')
	})
	let data1 = []
	let dataLegend = []
	let sum = 0
	// 根据总值设置间隔值大小
	chartdata.value.forEach(item => {
		sum += Number(item.value)
	})
	// 给每个数据后添加特定的透明的数据形成间隔
	chartdata.value.forEach(item => {
		if (item.value !== 0) {
			data1.push(item, {
				name: '',
				value: sum / 100,
				labelLine: {
					show: false,
					lineStyle: {
						color: 'transparent'
					}
				},
				itemStyle: {
					color: 'transparent'
				}
			})
		}

		dataLegend.push(item.name)
	})
	myChart.setOption({
		title: {
			// text: "核验量",
			// left: 20,
			// textStyle: {
			//   fontSize: 14,
			// },
		},
		grid: {
			top: 0,
			bottom: 0,
			left: 0,
			right: 0,
			containLabel: true
		},
		tooltip: {
			borderColor: 'rgba(0, 0, 0, 0.8)',
			backgroundColor: 'rgba(0, 0, 0, 0.70)',
			textStyle: {
				color: '#fff'
			},
			formatter: params => {
				if (params.name !== '') {
					return params.marker + params.name + ' : ' + params.value + '\n' + '(' + params.percent + '%)'
				}
			}
		},
		legend: {
			data: dataLegend,
			// orient: "vertical",
			top: '20%',
			right: '12%',
			width: '48%',
			itemWidth: 10,
			itemHeight: 10,
			formatter: params => {
				let data = ''
				chartdata.value.forEach(item => {
					if (item.name === params) {
						data = `{a|${params}\n${item.value}} `
					}
				})
				return data
			},
			itemGap: 15,
			textStyle: {
				color: 'rgba(0,0,0,0.65)',
				rich: {
					a: {
						width: 55
					}
				}
			}
		},
		series: [
			// 最外层圆环
			{
				type: 'pie',
				radius: ['50%', '67%'],
				center: ['23%', '40%'],
				startAngle: 90,
				selectedMode: 'single',
				selectedOffset: 0,
				itemStyle: {
					color: params => {
						return color1[params.dataIndex]
					}
				},
				label: {
					show: true,
					position: 'center',
					rich: {
						total: {
							color: 'rgba(0,0,0,0.85)',
							align: 'center',
							fontSize: 24,
							fontWeight: '600'
							// fontFamily: 'DIN-Bold'
						},
						name: {
							color: 'rgba(0,0,0,0.65)',
							align: 'center',
							fontSize: 12
						}
					},
					formatter: () => {
						return `{total|${sum}} \r\n{name|总量}`
					}
				},
				data: data1,
				z: 666
			}
		]
	})
}
// 数据核验趋势
const initTrendChart = () => {
	const dom = document.getElementById('dataV-trend')
	let myChart = mainChart.init(dom)

	myChart.setOption({
		title: {
			// text: "数据核验趋势",
			// left: 20,
			// textStyle: {
			//   fontSize: 14,
			// },
		},
		grid: {
			top: 10,
			left: 50,
			bottom: 120,
			right: 35
		},
		color: ['rgba(109, 210, 48, 1)', 'rgba(56, 125, 255, 1)'],
		toolbox: {
			// feature: {
			//   dataZoom: {
			//     yAxisIndex: "none",
			//   },
			//   restore: {},
			// },
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				animation: false,
				label: {
					backgroundColor: 'rgba(0,0,0,0.7)'
				}
			},
			backgroundColor: 'rgba(0,0,0,0.7)',
			textStyle: {
				color: '#fff'
			}
		},
		legend: {
			data: ['数据总量', '数据核验通过量'],
			bottom: 10,
			// left: 60,
			icon: 'rect',
			itemWidth: 2,
			itemHeight: 10,
			borderColor: '#e5e6eb',
			borderWidth: 1,
			padding: [6, 8, 6, 8]
		},
		xAxis: [
			{
				type: 'category',
				boundaryGap: true,
				// boundaryGap: ["10%", "40%"],
				axisLine: {
					onZero: false
				},
				data: sjhyqsXData.value
				// axisLabel: {
				//   showMaxLabel: false,
				// },
			}
		],
		yAxis: [
			{
				name: '',
				type: 'value'
				// axisLabel: {
				//   formatter: (e) => {
				//     return e + "%";
				//   },
				// },
			}
		],
		dataZoom: [
			{
				show: true,
				height: 30,
				xAxisIndex: [0],
				bottom: 60,
				startValue: sjhyqsXData.value.length - 12,
				endValue: sjhyqsXData.value.length,
				handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
				handleSize: '110%',
				handleStyle: {
					color: '#d3dee5'
				},
				textStyle: {
					color: '#fff'
				},
				borderColor: '#90979c'
			},
			{
				type: 'inside',
				show: true,
				height: 15
			}
		],
		series: [
			{
				name: '数据总量',
				type: 'line',
				smooth: true,
				lineStyle: {
					width: 2
				},
				areaStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{
							offset: 0,
							color: 'rgba(109, 210, 48, 0.8)'
						},
						{
							offset: 1,
							color: 'rgba(109, 210, 48, 0)'
						}
					])
				},
				symbolSize: 0,
				data: sjhyqsYData1.value
			},
			{
				name: '数据核验通过量',
				type: 'line',
				smooth: true,
				lineStyle: {
					width: 2
				},
				areaStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{
							offset: 0,
							color: 'rgba(56, 125, 255, 0.8)'
						},
						{
							offset: 1,
							color: 'rgba(56, 125, 255, 0)'
						}
					])
				},
				symbolSize: 0,
				data: sjhyqsYData2.value
			}
		]
	})
}
</script>
<style lang="scss">
.data_section {
	padding: 20px;
	margin-bottom: 40px;
	font-size: 16px;
	color: rgba(16, 16, 16, 1);
	background: #fff;
	.data_profiling {
		height: 210px;
		width: 100%;

		.data_main {
			width: 100%;
			height: calc(100% - 17px);
			margin-top: 14px;
			margin-top: 14px;
			.el-row {
				margin-bottom: 20px;
				&:last-child {
					margin-bottom: 0;
				}
			}
			.el-col {
				border-radius: 4px;
			}

			.grid-content {
				padding: 10px;
				min-height: 36px;
			}

			.data-set {
				background: #ffffff;
				box-shadow: 0px 0px 8px 0px rgba(188, 188, 188, 0.25);
				border-radius: 4px;
				height: 100px;
				padding: 16px 20px;
			}
			.data-table {
				border-radius: 4px;
				background: #ffffff;
				box-shadow: 0px 0px 8px 0px rgba(188, 188, 188, 0.25);
				height: 100px;
				padding: 16px 20px;
			}
			.mon-fields {
				border-radius: 4px;
				background: #ffffff;
				box-shadow: 0px 0px 8px 0px rgba(188, 188, 188, 0.25);
				height: 100px;
				padding: 16px 20px;
			}
			.rules-number {
				border-radius: 4px;
				background: #ffffff;
				box-shadow: 0px 0px 8px 0px rgba(188, 188, 188, 0.25);
				height: 100px;
				padding: 16px 20px;
			}
			.verification-number {
				border-radius: 4px;
				background: #ffffff;
				box-shadow: 0px 0px 8px 0px rgba(188, 188, 188, 0.25);
				height: 100px;
				padding: 16px 20px;
			}
			.refresh-time {
				padding: 16px 20px;
				height: 100px;
				border-radius: 4px;
				background: url(@/assets/mask-group.png) 100% no-repeat;
				background-size: 100% 100%;
				.data-col-title {
					font-size: 14px;
					color: #fff;
					line-height: 16px;
				}
				.data-value {
					font-size: 30px;
					.el-statistic .con {
						justify-content: flex-start;
					}
				}
			}
		}
	}

	.data_q {
		.data_main {
			padding-top: 20px;
		}
		#dataQ {
			width: 100%;
			height: 260px;
		}
		#dataVerification {
			width: 100%;
			height: 260px;
		}

		.dataVList {
			display: grid;
			grid-template-columns: auto auto;
			// grid-gap: 20px;
			padding: 30px 2px;
			.dataV-item {
				width: 100%;
				height: 40px;

				.dataV-name {
					height: 20px;
					font-size: 12px;
					display: flex;
					align-items: center;
					padding-top: 10px;
					.sp-block {
						width: 13px;
						height: 13px;
						margin-right: 5px;
					}
				}
				.dataV-value {
					margin-left: 18px;
					font-size: 14px;
				}
			}
		}
	}

	#dataV-trend {
		width: 100%;
		margin-top: 20px;
		min-height: 500px;
	}

	.data_title {
		// font-family: AlibabaPuHui-medium;
		padding-left: 16px;
		background: #f7f8fa;
		line-height: 32px;
		font-size: 14px;
		font-weight: 550;
		color: #1d2129;

		.see-more {
			font-size: 12px;
			color: rgba(22, 93, 255, 1);
			cursor: pointer;
		}
	}

	.data-col-title {
		font-family: AlibabaPuHui-regular;
		font-weight: 400;
		color: #4e5969;
		line-height: 16px;
		font-size: 14px;
	}

	.data-value {
		margin-top: 15px;
		font-size: 30px;
		color: #1d2129;
		span {
			font-weight: bold;
			font-family: 'D-DIN';
		}
	}

	.data-yoy {
		font-size: 12px;
		color: rgba(78, 89, 105, 1);
		margin-top: 5px;
	}

	.sp-blue {
		background: rgba(1, 109, 218, 1);
	}
	.sp-blue8 {
		background: rgba(35, 160, 228, 1);
	}
	.sp-blue6 {
		background: rgba(81, 192, 240, 1);
	}
	.sp-blue4 {
		background: rgba(107, 224, 224, 1);
	}
	.sp-blue2 {
		background: rgba(36, 223, 190, 1);
	}
	.sp-green4 {
		background: rgb(52, 219, 189);
	}
	.sp-green2 {
		background: rgb(121, 243, 221);
	}
	.el-table th.el-table__cell {
		background-color: #f0f1f6 !important;
		color: #1d2129;
		font-size: 14px;
	}
	// .el-table .el-table__cell {
	// 	padding: 8px 0;
	// }
	// .el-table {
	// 	border: 0;
	// }
	// .el-table::before {
	// 	height: 0;
	// }
	// .el-table::after {
	// 	width: 0;
	// }

	// .el-table .el-table__body {
	// 	// border: 1px solid #e5e6eb;
	// 	// border-bottom-width: 0;
	// 	.el-table__row {
	// 		td {
	// 			&:nth-child(1) {
	// 				border-left: 1px solid #ebeef5;
	// 				border-right-width: 0;
	// 			}
	// 			&:nth-child(2) {
	// 				border-right-width: 0;
	// 			}
	// 			&:nth-child(3) {
	// 				border-right-width: 0;
	// 			}
	// 		}
	// 	}
	// }

	// .el-table .el-table__header {
	// 	th {
	// 		&:nth-child(1) {
	// 			border-right-width: 0;
	// 		}
	// 		&:nth-child(2) {
	// 			border-right-width: 0;
	// 		}
	// 		&:nth-child(3) {
	// 			border-right-width: 0;
	// 		}
	// 	}
	// }
}
</style>
